import { Effect } from "dva-core-ts";
import { Reducer } from "react";
import axios from 'axios';
import { RootState } from '.';

export interface ICarousel {
    id: string,
    image: string,
    colors: [string, string]
}

export interface IGuess {
    id: string
    title: string
    image: string

}

export interface IPagination {
    current: number;
    total: number;
    hasMore: boolean;
}

export interface IChannel {
    id: string
    title: string
    image: string
    remark: string
    played: number
    playing: number
}
interface HomeState {
    hasMore: Boolean,
    namespace: string,
    gradientVisible: boolean
    activeCarouselIndex: number; // 当前轮播图的下标
    carousels: ICarousel[]
    guess: IGuess[]
    channels: IChannel[]
    pagination: IPagination
}

interface HomeModal {
    namespace: 'home',
    state: HomeState,
    reducers: {
        setState: Reducer<HomeState>
    }
    effects: {
        fetchCarousels: Effect
        fetchGuess: Effect
        fetchChannels: Effect
    }
}

const initialState: HomeState = {
    hasMore: true,
    namespace: 'home',
    carousels: [],
    guess: [],
    gradientVisible: true,
    activeCarouselIndex: 0,
    channels: [],
    pagination: {
        current: 1,
        total: 0,
        hasMore: true,
    }
}

const homeModal: HomeModal = {
    namespace: 'home',
    state: initialState,
    reducers: {
        setState(state = initialState, { payload }) {
            return {
                ...state,
                ...payload
            }
        },

    },
    effects: {
        *fetchCarousels(_, { call, put }) {
            let { data } = yield call(axios.get, '/carousel');
            console.log(data)
            yield put({
                type: 'setState',
                payload: {
                    carousels: data
                }
            })
        },
        *fetchGuess(_, { call, put }) {
            let { data } = yield call(axios.get, '/guess');
            yield put({
                type: 'setState',
                payload: {
                    guess: data
                }
            })
        },
        *fetchChannels({ callback, payload }, { call, put, select }) {
            const { channels, pagination } = yield select((state: RootState) => state.home);
            let page = 1;
            if (payload && payload.loadMore) {
                page = pagination.current + 1;
            }
            const { data } = yield call(axios.get, '/channel', {
                params: {
                    page,
                }
            });
            let newChannels = data.results;
            if (payload && payload.loadMore) {
                newChannels = channels.concat(newChannels);
            }

            yield put({
                type: 'setState',
                payload: {
                    channels: newChannels,
                    pagination: {
                        current: data.pagination.current,
                        total: data.pagination.total,
                        hasMore: newChannels.length < data.pagination.total,
                    },
                }
            })
            if (typeof callback === 'function') {
                callback();
            }
        }
    }
}


export default homeModal